<template>
  <KView class="sys-theme-view clearfix">
    <KView v-for="theme in themeList" :key="theme.id" class="sys-theme-view-item clearfix" @click="themeClick(theme)">
      <KView class="sys-theme-view-item-text clearfix" :style="{color:theme.color}" :class="{'is_select':theme===curTheme}">
        <KView>#</KView>
        <KView class="ellipsis" style="max-width:5em">{{theme.text}}</KView>
        <KView>#</KView>
      </KView>
      <KView class="sys-theme-view-item-count">{{theme.count}}条</KView>
    </KView>
  </KView>
</template>

<script>
  export default {
    props: {
      themeList: {
        type: Array,
        required: true
      },
      curTheme: {
        type: Object,
        required: true
      }
    },

    data() {
      return {};
    },

    methods: {
      themeClick(theme) {
        if (this.curTheme === theme) {
          return;
        }

        this.$emit('theme-click', theme);
      }
    }
  };

</script>

<style lang="scss">
  .sys-theme-view {
    margin-right: formatPx(-28);

    .sys-theme-view-item {
      float: left;
      margin-right: formatPx(28);
      margin-bottom: formatPx(20);
      font-size: formatPx(26);
      max-width: 7em;
      text-align: center;

      .sys-theme-view-item-text {
        height: formatPx(30);
        line-height: formatPx(30);
        display: inline-block;

        >div {
          float: left;
          height: 100%;
        }

        &.is_select {
          color: #999999 !important;
        }
      }

      .sys-theme-view-item-count {
        height: formatPx(30);
        line-height: formatPx(30);
        font-size: formatPx(24);
        color: #999999;
      }
    }
  }

</style>
